W23_前端框架 Redux 學習筆記


Posted by Christy on 2021-12-29

零、讀書計畫

1. 作業概覽:

hw1: Redux 版 Todo List

把 W21 的 todo list 改寫成 redux 版本

hw2:

  1. 為什麼我們需要 Redux?

  2. Redux 是什麼?可以簡介一下 Redux 的各個元件跟資料流嗎?

  3. 該怎麼把 React 跟 Redux 串起來?

2. 預計花費時間:50 小時

開始時間:12/22,結束時間:12/29 總共八天

實際時間:12/22 - 12/29 總共八天 34 小時

3. 讀書行動

預計實作事項:邊看影片邊把作業二的問題回答出來

實際流程:

a. MTR W23 導讀

b. React、Flux Official introduction video

c. [FE303]「Redux 簡介」為止看完

d. 跟著影片實作一遍

這次很順利地採用上述做法,邊實作邊筆記以後,接著就是多多練習這樣,希望能夠在時間內把作業交出去。

e. 閱讀 Redux 官方文件,大概看過

4. 自我檢測

  • P1 我理解 Redux 的目的以及原理

  • P1 我理解 Redux 的資料流

  • P1 我理解 Redux 當中各種重要元素,像是:dispatch, store, action, reducer 等等

  • P1 我知道我們為什麼需要 Redux

一、筆記內容

1. React Flux Official introduction video

藉由臉書當年官方介紹影片,來理解 Flux 發展由來,MVC 框架雖然職權分明,但牽一髮而動全身、改 A 壞 B 拖累開發時間,目標是 "High quality in less time",因此發明了 React 與 Flux 來增加「可預測性」、「易維護性」、「操作直覺」,以達成目的。

2. 那些 React 跟 Redux 在一起的日子

本文介紹了 redux 的前世今生,該怎麼使用,該怎麼跟 react 串在一起,最後小試了老朋友 todo list 新增、刪除功能。

redux 是見世面,要大人物等級的 app 才會用的,先有廣度,工作後會對某些東西有深度,似乎也不賴

3. 用 React + Redux 做一個 todo list 吧

4. Redux 介紹、如何串接 React 與 Redux

二、W23 + W24 直播檢討 23 mins

我決定上完 W24 一起看

三、心得與心態調整

心得:

redux 用在小專案有點煩瑣,一邊寫一邊碎念,蛤這裡還要這樣喔,到最後都忘了發揮客家精神要幫 react 用 memouseCallback 那些優化手段包好包滿,不過見見世面也好。

心態:

這一次訂立讀書計畫並且有預定時間內完成,覺得還不錯,希望接下來一樣能夠順利。

下一週 W24 感覺東西不少,明天再繼續努力吧。

四、其他

Create-react-app 錯誤訊息

安裝 react-redux 時出的錯,暫時無解,目前最好解法是先裝 create-react-app 再裝 redux,這樣沒有問題。

react-redux 錯誤訊息:...is missing in props validation










Related Posts

1661. Average Time of Process per Machine

1661. Average Time of Process per Machine

陪你讀論文 - Part-Aware Data Augmentation for 3D Object Detection in Point Cloud

陪你讀論文 - Part-Aware Data Augmentation for 3D Object Detection in Point Cloud

LeetCode JS Easy 2704. To Be Or Not To Be

LeetCode JS Easy 2704. To Be Or Not To Be


Comments